<template>
    <tiny-layout class="layout">
        <tiny-row>
            <tiny-row :flex="true" class="row-bg align" justify="center" v-if="data.isLogin">
                <tiny-col class="col md" >
                   已登录账户<tiny-link type="success">{{ store.powerJob.username }}</tiny-link> <tiny-link type="warning" @click="loginOut">退出</tiny-link>
                </tiny-col>
            </tiny-row>
                <tiny-form :inline="true" ref="loginForm" :model="data.loginForm" :rules="loginForms" :validate-type="validType" v-if="!data.isLogin">
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="用户名" prop="username">
                            <tiny-input v-model="data.loginForm.username" placeholder="用户名"></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="密码" prop="password">
                                <tiny-input v-model="data.loginForm.password" type="password" placeholder="密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-form-item label=" " >
                            <tiny-button @click="register" type="success" size="small" ghost>注册</tiny-button>
                            <tiny-button @click="login" type="info" size="small" ghost>登录</tiny-button>
                        </tiny-form-item>
                    </tiny-row>
                </tiny-form>
                
       
        </tiny-row>
        <tiny-dialog-box v-model:visible="data.isRegister" center title="注册" width="30%">
            <tiny-form :inline="true" ref="registerForm" label-width="100px" label-position="right" size="small" :model="data.registerForm" :rules="rules" :validate-type="validType" >
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="用户名" prop="username">
                            <tiny-input v-model="data.registerForm.username" placeholder="英文"></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="昵称" prop="nick">
                            <tiny-input v-model="data.registerForm.nick" placeholder="昵称"></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="手机号">
                            <tiny-input v-model="data.registerForm.phone" type="number" placeholder="手机号"></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center" >
                        <tiny-col class="col md" >
                            <tiny-form-item label="邮箱">
                            <tiny-input v-model="data.registerForm.email" placeholder="邮箱"></tiny-input>
                        </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="密码" prop="password">
                                <tiny-input v-model="data.registerForm.password" type="password" placeholder="密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-col class="col md">
                            <tiny-form-item label="确认密码" prop="password2">
                                <tiny-input v-model="data.registerForm.password2" type="password" placeholder="确认密码" show-password></tiny-input>
                            </tiny-form-item>
                        </tiny-col>
                    </tiny-row>
                    <tiny-row :flex="true" class="row-bg align" justify="center">
                        <tiny-form-item label=" " >
                            <tiny-button @click="registerBtn" type="success" size="small" ghost>注册</tiny-button>
                            <!-- <tiny-button @click="restBtn" type="success" size="small" ghost>重置</tiny-button> -->
                            <tiny-button @click="callBtn" type="info" size="small" ghost>取消</tiny-button>
                        </tiny-form-item>
                    </tiny-row>
                </tiny-form>

    </tiny-dialog-box>
        
        </tiny-layout>

</template>
<script setup>
  import {reactive, ref, getCurrentInstance,onMounted} from 'vue';  
  import { TinyLayout, TinyRow, TinyCol,TinyDialogBox ,TinyActionMenu ,TinyLink } from '@opentiny/vue'
  import {Modal, Pager} from '@opentiny/vue';
  import {cosSystem} from '@/stores/system.js';
  let store = cosSystem();
  const {proxy} = getCurrentInstance();
  const data = reactive({
    isLogin: false,
    loginForm: { username: '', password: ''},
    isRegister: false,
    registerForm: { username: '', password: '',password2:'','nick':'','phone':'','email':'',webHook:""},
  })
  const registerForm = ref();
  const rules = ref({
    username: { required: true, message: '请填写用户名', trigger: 'blur' },
    nick: { required: true, message: '必填' },
    password: { required: true, message: '必填' },
    password2: { required: true, message: '必填' }
    })
    const loginForm = ref();
    const loginForms = ref({
        username: { required: true, message: '请填写用户名', trigger: 'blur' },
        password: { required: true, message: '请填写密码', trigger: 'blur' }
    })
    const options = ref([
        {
            label: '退出'
        },
        // {
        //     label: '模块信息'
        // },

    ])
    const loginOut = ()=>{
        store.powerJob={};
        data.isLogin=false;
    }
    onMounted(()=>{
        //判断是否已经登录
        if(store.powerJob.jwtToken){
            data.isLogin=true;
            // proxy.$router.push({path:'/sys/powerJob/app'});
            Modal.message({status: 'success', message: "您已经登录"});
        }else{
            // data.isRegister=true;
        }
    })
    // 登录
  const login = ()=>{
        let params={
            "loginType":"PWJB",//登录类型自带类型
            "originParams": JSON.stringify(data.loginForm)
        }
        loginForm.value.validate((valid)=>{
            if (valid) {
                // 登录
                proxy.$api.taskJob.login(params).then((res)=>{
                    // 存储token
                    if(res){
                        store.setItem({key:"powerJob",data:res.data});
                        proxy.$router.push({path:'/sys/powerJob/app'});
                    }else{
                        Modal.message({status: 'warning', message: "用户名或密码错误"});
                    }
                }).catch((err)=>{
                    Modal.message({status: 'warning', message: '登录异常'});
                })
            } else {
                return false;
            }
        } )
    }
  // 重置
  const restBtn=()=>{
    registerForm.value.resetFields();
  }
  // 注册弹窗
  const register = ()=>{
    data.isRegister=true;
  }
  // 取消
  const callBtn = ()=>{
    data.isRegister=false;
  }
  // 确认注册
  const registerBtn = ()=>{
    if(data.registerForm.password!=data.registerForm.password2){
        Modal.message({status: 'warning', message: "密码不一致"});;
        return;
    }
    registerForm.value.validate((valid) => {
        if (valid) {
            // 注册
            proxy.$api.taskJob.register(data.registerForm).then(res=>{
                // 存储token
                console.log(res);
                if(res.success){
                    Modal.message({status: 'success', message: "注册成功"});
                    data.isRegister=false;
                }else{
                    Modal.message({status: 'warning', message: res.message});
                }
            })
        } else {
            return false;
        }
    })
  }
</script>

<style lang="scss" scoped>
.layout{
    margin-top: 10%;
    /* height: calc(100vh - 180px); */
    display: flex;

    align-items: left;

}
.row-bg .col {
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>